<template>
  <div class="song-list" v-if="songs">
    <ul>
      <li v-for="(song,index) in songs" class="item" @click="selectItem(song,index)">
        <div class="rank" v-if="rank">
          <span :class="getRankCls(index)">{{getRankText(index)}}</span>
        </div>
        <div class="content">
          <h2 class="name">{{song.name}}</h2>
          <p class="desc">{{getDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  let _this = null;

  export default {
    props: ['songs','rank'],
    data(){
      return {}
    },
    mounted () {
      _this = this;
      _this.init();
    },
    methods: {
      init () {
      },
      //只告诉外界我被点了和我的索引
      selectItem(item,index){
        //$emit 发送数据  ==== 子组件向父组件(music-list)通信  派发select事件
        this.$emit('select',item,index)
      },
      getDesc(song){
        return song.singer+'.'+song.album
      },
      getRankCls(index){
        if(index <= 2){
          return ` icon icon${index}`
        }
      },
      getRankText(index){
        if(index>2){}
        return index +1
      }

    },
    watch: {},
    components: {},
    computed: {},

  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/variable.styl';
  @import "../../common/stylus/mixin.styl"
  .song-list
    .item
      display: flex
      align-items: center
      box-sizing: border-box
      height: 64px
      font-size: $font-size-medium
      .rank
        flex: 0 0 25px
        width: 25px
        margin-right: 30px
        text-align: center
        .icon
          display: inline-block
          width: 25px
          height: 24px
          background-size: 25px 24px
          &.icon0
            bg-image('first')
          &.icon1
            bg-image('second')
          &.icon2
            bg-image('third')
        .text
          color: $color-theme
          font-size: $font-size-large
      .content
        flex: 1
        line-height: 20px
        overflow: hidden
        .name
          no-wrap()
          color: $color-text
        .desc
          no-wrap()
          margin-top: 4px
          color: $color-text-d
</style>
